<template>
  <div class="process-instances">
    <!-- 查询表单 -->
    <el-form :inline="true" :model="queryForm" class="query-form">
      <el-form-item label="流程状态">
        <el-radio-group v-model="queryForm.status" @change="handleStatusChange">
          <el-radio-button label="active">进行中</el-radio-button>
          <el-radio-button label="completed">已完成</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="流程名称">
        <el-input v-model="queryForm.definitionName" placeholder="请输入流程名称" clearable />
      </el-form-item>
      <el-form-item label="课题名称">
        <el-input v-model="queryForm.topicName" placeholder="请输入课题名称" clearable />
      </el-form-item>
      <el-form-item label="发起人">
        <el-input v-model="queryForm.startUserName" placeholder="请输入发起人" clearable />
      </el-form-item>
      <el-form-item label="节点">
        <el-input v-model="queryForm.taskName" placeholder="请输入节点" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="warning" @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格 -->
    <el-table
      v-loading="loading"
      :data="list"
      border
      style="width: 100%; min-width: 800px; border-radius: 12px; overflow: hidden; box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);"
      :header-cell-style="{ backgroundImage: 'linear-gradient(to right, #f0f9ff, #e5eaff)', color: '#333', fontWeight: 'bold' }"
      :cell-style="{ padding: '12px 8px' }"
      fit
    >
      <el-table-column label="序号" type="index" width="100" />
      <el-table-column label="流程名称" align="center" prop="definitionName" />
      <el-table-column label="课题名称" align="center" prop="topicName" />
      <el-table-column label="创建时间" align="center" prop="createTime" sortable />
      <el-table-column label="当前节点" align="center" prop="taskName" />
      <el-table-column label="发起人" align="center" prop="startUserName" />
      <el-table-column label="操作" align="center" width="200">
        <template #default="scope">
          <div class="button-group">
            <el-button link class="btn-view" @click="handleHistoryRecord(scope.row.processInstanceId)">
              <el-icon class="icon"><More /></el-icon>审批记录
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      background
      layout="total, sizes, prev, pager, next"
      v-model:page-size="queryForm.pageSize"
      v-model:current-page="queryForm.pageNo"
      :page-sizes="[10, 20, 50, 100]"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      class="pagination"
    />

    <!-- 审批记录 -->
    <HistoryRecord ref="historyRecordRef" />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from "vue";
import { debounce } from "lodash-es";
import baseService from "@/service/baseService";
// @ts-ignore
import HistoryRecord from "@/components/HistoryRecord/index.vue";

// 查询参数
const queryForm = reactive({
  status: 'active', // 默认显示进行中的流程
  definitionName: "",
  topicName: "",
  startUserName: "",
  taskName: "",
  pageNo: 1,
  pageSize: 10
});

const total = ref(0);
const loading = ref(false);
const list = ref<any[]>([]);
const historyRecordRef = ref();

// 获取流程实例数据
const fetchData = async () => {
  loading.value = true;
  try {
    // 根据状态选择不同的接口
    const url = queryForm.status === 'active' 
      ? "/processDefinition/listExecutions" 
      : "/processDefinition/listHistoricExecutions";
    
    const res = await baseService.post(url, queryForm);
    if (res.code === 200) {
      list.value = res.data.records;
      total.value = res.data.total;
    } else {
      list.value = [];
      total.value = 0;
    }
  } catch (error) {
    console.error("Failed to fetch data:", error);
  } finally {
    loading.value = false;
  }
};

// 监听查询条件变化
watch(() => queryForm.definitionName, debounce(fetchData, 500));
watch(() => queryForm.topicName, debounce(fetchData, 500));
watch(() => queryForm.startUserName, debounce(fetchData, 500));
watch(() => queryForm.taskName, debounce(fetchData, 500));

// 处理状态切换
const handleStatusChange = () => {
  queryForm.pageNo = 1;
  fetchData();
};

// 重置查询条件
const handleReset = () => {
  queryForm.definitionName = "";
  queryForm.topicName = "";
  queryForm.startUserName = "";
  queryForm.taskName = "";
  queryForm.pageNo = 1;
  fetchData();
};

// 处理分页大小变化
const handleSizeChange = (val: number) => {
  queryForm.pageSize = val;
  fetchData();
};

// 处理页码变化
const handleCurrentChange = (val: number) => {
  queryForm.pageNo = val;
  fetchData();
};

// 查看审批记录
const handleHistoryRecord = (instanceId: string) => {
  historyRecordRef.value.open(instanceId);
};

// 初始化加载数据
fetchData();
</script>

<style scoped>
.process-instances {
  padding: 20px;
}

.query-form {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

/* 表格样式 */
.el-table {
  margin-top: 20px;
  background-color: #fff;
  font-size: 14px;
  transition: all 0.3s;
}

/* 分页容器样式 */
.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  padding: 10px;
}

/* 按钮组样式 */
.button-group {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.btn-view {
  display: inline-flex;
  align-items: center;
  color: #409EFF;
}

.icon {
  margin-right: 4px;
}

/* 状态切换按钮组样式 */
:deep(.el-radio-group) {
  margin-right: 16px;
}

:deep(.el-radio-button__inner) {
  padding: 8px 20px;
}

/* 表格hover效果 */
:deep(.el-table__row:hover) {
  background-color: #f5f7fa !important;
}

/* 加载状态样式 */
:deep(.el-loading-mask) {
  background-color: rgba(255, 255, 255, 0.8);
}
</style> 